<template>
  <component :is="useMainStore().layoutConfig.layoutMode"></component>
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue'
import { useEventListener } from '@vueuse/core'

import useMainStore from '@/stores/main/main'
import Default from '@/layout/container/default.vue'
import Streamline from '@/layout/container/streamline.vue'
onBeforeMount(() => {
  onAdaptiveLayout()
  useEventListener(window, 'resize', onAdaptiveLayout)
})

const onAdaptiveLayout = () => {
  const clientWidth = document.body.clientWidth
  if (clientWidth < 1024) {
    useMainStore().layoutConfig.shrink = true
    useMainStore().layoutConfig.layoutMode = 'default'
    useMainStore().isCollapse = true
  } else {
    useMainStore().layoutConfig.shrink = false
  }
}
</script>
<!-- 只有在 components 选项中的组件可以被动态组件使用-->
<script lang="ts">
export default {
  components: { Default, Streamline }
}
</script>
<style lang="less" scoped></style>
